<template>
  <div id="dynamicNewsBox">
    <div class="dynamicNewsToolBox">
      <div @click="stop" v-if="state">停止接收</div>
      <div @click="start" v-if="state">开始接收</div>
      <div @click="close" v-if="state">收起消息</div>
      <div @click="open" v-if="!state">展开消息</div>
    </div>
    <ul
      id="contentBox"
      ref="contentBox"
      :style="{ height: !state ? 0 : '400px' }"
      v-show="state"
    >
      <li
        v-for="(item, index) in items"
        :key="index"
        class="anim"
        @click="handelClick(item)"
        :style="[{ transition: !state ? 'none' : ' all 20s ease' }]"
      >
        {{ '用户ID' + item.userID + ' ' + item.type + ' ' + item.taskName }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animate: false,
      items: [],
      type: ['学习', '完成', '观看视频', '提交学习数据'],
      userID: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31,
        32,
        33,
        34,
        35,
        36,
        37,
        38,
        39,
        40,
        41,
        42,
        43,
        44,
        45,
        46,
        47,
        48,
        49,
        50,
        51,
        52,
        53,
        54,
        55,
        56,
        57,
        58,
        59,
        60,
      ],
      taskName: [
        '基础任务1',
        '基础任务2',
        '基础任务3',
        '基础任务4',
        '基础任务5',
        '基础任务1',
        '基础任务2',
        '基础任务3',
        '基础任务4',
        '基础任务5',
        '基础任务6',
        '基础任务7',
        '基础任务8',
        '基础任务1',
        '基础任务2',
        '基础任务3',
        '基础任务4',
        '基础任务5',
        '基础任务6',
        '基础任务7',
        '基础任务8',
        '基础任务9',
        '基础任务1',
        '基础任务2',
        '基础任务3',
        '基础任务4',
        '基础任务5',
        '基础任务6',
        '基础任务7',
        '基础任务8',
        '基础任务9',
        '基础任务10',
        '基础任务1',
        '基础任务2',
        '基础任务3',
        '基础任务4',
        '基础任务5',
        '基础任务1',
        '基础任务2',
        '基础任务3',
        '基础任务4',
        '基础任务5',
        '基础任务6',
        '基础任务7',
      ],
      task: [
        {
          goal: '打好基础',
          name: '基础任务1',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '游戏',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '播放',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '下载',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '刷题',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 1,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务2',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '下载',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '上传',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '游戏',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '简答',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 2,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务3',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '上传',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '播放',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '上传',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '下载',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 3,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务4',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '下载',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '下载',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '游戏',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '播放',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 4,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务5',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '上传',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '上传',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 5,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务1',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '刷题',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '下载',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '游戏',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '游戏',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 1,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务2',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '上传',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '简答',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '播放',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '播放',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 2,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务3',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '刷题',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '播放',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '刷题',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '下载',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '刷题',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 3,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务4',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '上传',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '游戏',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '简答',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 4,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务5',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '上传',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '播放',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '刷题',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '游戏',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 5,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务6',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '上传',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '下载',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '上传',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '游戏',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '刷题',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 6,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务7',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '播放',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '播放',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '下载',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 7,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务8',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '游戏',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '播放',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 8,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务1',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '刷题',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '游戏',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '简答',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 1,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务2',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '上传',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '简答',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '播放',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 2,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务3',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '刷题',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '上传',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '简答',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '刷题',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 3,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务4',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '刷题',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '刷题',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '刷题',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 4,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务5',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '简答',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 5,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务6',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '下载',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 6,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务7',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '游戏',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '下载',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '上传',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 7,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务8',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '简答',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '简答',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 8,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务9',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '刷题',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '简答',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '简答',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 9,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务1',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '游戏',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '播放',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '游戏',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '下载',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 1,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务2',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '上传',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '游戏',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 2,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务3',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '游戏',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '播放',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '播放',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 3,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务4',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '下载',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '游戏',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '上传',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '上传',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '上传',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 4,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务5',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '播放',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '刷题',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '简答',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 5,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务6',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '下载',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '刷题',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '播放',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 6,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务7',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '上传',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '游戏',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '简答',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '游戏',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '刷题',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 7,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务8',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '刷题',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '播放',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '简答',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 8,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务9',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '上传',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '刷题',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '播放',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 9,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务10',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '播放',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '下载',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '上传',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 10,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务1',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '上传',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '游戏',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '简答',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '上传',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '下载',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 1,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务2',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '游戏',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '刷题',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 2,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务3',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '上传',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '播放',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 3,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务4',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '游戏',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '播放',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '播放',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '上传',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 4,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务5',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '下载',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '游戏',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '播放',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '刷题',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '播放',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 5,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务1',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '刷题',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '播放',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 1,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务2',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '上传',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '刷题',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '刷题',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '刷题',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 2,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务3',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '下载',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '刷题',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '下载',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '播放',
              description: '引导文内容4',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 3,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务4',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '播放',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '刷题',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 4,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务5',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '上传',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '简答',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '播放',
              description: '引导文内容3',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 5,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务6',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '上传',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '简答',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '简答',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '上传',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '播放',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 6,
          weightInGroup: 10,
        },
        {
          goal: '打好基础',
          name: '基础任务7',
          level: 1,
          iconPath: '/icons/task/icon1.svg',
          guidelines: [
            {
              noInTask: 1,
              operType: '简答',
              description: '引导文内容1',
              weightInTask: 10,
            },
            {
              noInTask: 2,
              operType: '简答',
              description: '引导文内容2',
              weightInTask: 10,
            },
            {
              noInTask: 3,
              operType: '上传',
              description: '引导文内容3',
              weightInTask: 10,
            },
            {
              noInTask: 4,
              operType: '游戏',
              description: '引导文内容4',
              weightInTask: 10,
            },
            {
              noInTask: 5,
              operType: '刷题',
              description: '引导文内容5',
              weightInTask: 10,
            },
          ],
          description: '任务描述。。。。。',
          taskNoInGroup: 7,
          weightInGroup: 10,
        },
      ],
      sleepTime: 0, // 间隔时间
      state: true,
    }
  },
  methods: {
    // 滚动
    scroll() {
      if (isNaN(this.sleepTime)) return
      let time = (Math.floor(Math.random() * (10 - 2)) + 1) * 1000
      this.sleepTime = time
      let typeNum = Math.floor(Math.random() * (this.type.length - 1)) + 1
      let idNum = Math.floor(Math.random() * (this.userID.length - 1)) + 1
      let taskNameNum =
        Math.floor(Math.random() * (this.taskName.length - 1)) + 1
      let taskNum = Math.floor(Math.random() * (this.task.length - 1)) + 1
      let timer = setTimeout(() => {
        this.items.push({
          userID: this.userID[idNum],
          taskName: this.taskName[taskNameNum],
          task: this.task[taskNum],
          type: this.type[typeNum],
        }) // 将数组的第一个元素添加到数组的
        this.scroll()
        clearTimeout(timer)
      }, this.sleepTime)
    },
    // 点击消息
    handelClick(item) {
    },
    // 停止接收
    stop() {
      this.sleepTime = 'stop'
    },
    // 开始接收
    start() {
      this.sleepTime = 0
      this.scroll()
    },
    // 收起
    close() {
      this.items = []
      this.state = false
      this.stop()
    },
    // 展开
    open() {
      this.state = true
      this.start()
    },
  },
  mounted() {
    this.scroll()
    // this.scroll()
    // setInterval(this.scroll, 700)
  },
}
</script>

<style lang="stylus" scoped>
#dynamicNewsBox {
  z-index: 999999;
  position: fixed;
  left: 0;
  // top: 300px;
  bottom 32px
  /* width: 300px; */
  height: 400px;

  // overflow: hidden;
  .dynamicNewsToolBox {
    z-index: 999;
    position: relative;
    top: -30px;

    div {
      cursor: pointer;
      margin-right: 3px;
      display: inline-block;
      padding: 0 3px;
      border: 1px solid #666;
    }
  }

  // border: 1px solid black;
  @keyframes top {
    0% {
      transform: translateY(0);
    }

    30% {
      opacity: 1;
    }

    50% {
      opacity: 0.7;
    }

    70% {
      opacity: 0.3;
    }

    80% {
      opacity: 0;
    }

    // 90% {
    // opacity: 0.1;
    // display: none;
    // }
    100% {
      opacity: 0;
      transform: translateY(-430px);
      display: none;
    }
  }

  #contentBox {
    z-index: 999999;
    position: relative;
    display: flex;
    flex-flow: column;
    // align-items: flex-start;
    // justify-content: flex-end;
    padding: 0;
    height: 400px;
    width: 250px;
    overflow: hidden;

    li {
      z-index: 999999;
      position: absolute;
      bottom: -50px;
      opacity: 1;
      cursor: pointer;
      padding: 0 16px;
      margin-top: 7px;
      list-style: none;
      line-height: 43px;
      text-align: center;
      // width: 193px;
      height: 43px;
      background-color: rgba(1, 15, 27, 0.22);
      border-radius: 50px;
    }

    .anim {
      transition: all 20s ease;
      // margin-top: -290px;
      animation: top 20s;
    }
  }
}
</style>